<template>
  <GroupTabs :api="getEnvList" v-model:value="env" />
  <div class="mt-4 mb-4 mr-0 bg-white">
    <AMenu mode="inline">
      <a-menu-item v-for="o in list" :key="o.id" @click="handleclick(o)">
        {{ o.name }}
      </a-menu-item>
    </AMenu>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref, computed, onMounted, watch } from 'vue';
import { getGroupList, getEnvList } from '/@/api/config/group'
import { GroupModel } from '/@/api/config/model/groupModel';
import { Menu as AMenu } from 'ant-design-vue';
import GroupTabs from '/@/components/GroupTabs'

const emit = defineEmits(['select'])
const env = ref('Development')
const groups = ref<GroupModel[]>([])
const list = computed(() => unref(groups).filter(o => o.env == unref(env)))

onMounted(async () => {
  await init()
});

watch(() => env.value, (o) => {
  emit('select', { id: 0, env: o })
})

const init = async () => {
  groups.value = await getGroupList()
}

const handleclick = (item: GroupModel) => {
  emit('select', { id: item.id, env: item.env })
}
</script>